<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">库存 / 生成餐单 /</div>
            <div class="datetime-wrap">
                <label style="margin-right: 10px;">日期</label>
                <input id="datepicker" />
            </div>
            <div class="datetime-wrap">
                <label class="am-radio-inline">
                    <input type="radio" value="1" v-model="mealType"> 早餐
                </label>
                <label class="am-radio-inline">
                    <input type="radio" value="2" v-model="mealType"> 午餐
                </label>
                <label class="am-radio-inline">
                    <input type="radio" value="3" v-model="mealType"> 晚餐
                </label>
            </div>
            <ul class="am-list" id="list">
                <li v-for="(item, index) in list">
                    <a data-am-collapse="{parent: '#list'}" :href="'#detail-' + index">
                        {{ item.name }} <i class="am-icon-angle-down"></i>
                    </a>
                    <div class="del-wrap" @click="del(index)">
                        <i class="am-icon-trash"></i>
                    </div>
                    <div :id="'detail-' + index" class="am-panel-collapse am-collapse am-in">
                        <div class="am-panel-bd item-detail">
                            <div>食材详情</div>
                            <ul class="am-avg-sm-4">
                                <li v-for="(x, i) in item.list">{{ x.name }} {{ x.weight }}g</li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="add-wrap">
                <a href="javascript:" @click="add" style="color: #0e90d2;"><i class="am-icon-plus-square-o"></i> 添加</a>
            </div>
            <div class="count-wrap">
                <label style="margin-right: 10px;">份数</label>
                <input type="number" id="count" placeholder="请输入份数" v-model="count" />
            </div>
            <div class="submit-wrap">
                <button class="am-btn am-btn-primary" @click="submit" :disabled="submitDisabled">确定</button>
            </div>
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                mealDate: new Date().toLocaleDateString(),
                mealType: '',
                count: 100,
                submitDisabled: false
            }
        },
        mounted: function() {
            var self = this;
            layui.use('laydate', function() {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#datepicker',
                    format: 'yyyy/MM/dd',
                    done: function(value, date, endDate) {
                        self.mealDate = value;
                    }
                });
            });
            $("#datepicker").val(self.mealDate);
        },
        methods: {
            add() {
                layer.open({
                    type: 2,
                    area: ['700px', '550px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/boya/addMenuItem'
                });
            },
            del(index) {
                var self = this;
                self.list.splice(index, 1);
            },
            submit() {
                var self = this;
                if (self.mealDate == '') {
                    msg("请选择日期");
                    return;
                }
                if (self.mealType == '') {
                    msg("请选择用餐时间");
                    return;
                }
                if (Number(self.count) < 0) {
                    msg("份数不能为负数");
                    return;
                }
                var content = JSON.stringify(self.list);
                var param = Qs.stringify({
                    date: self.mealDate,
                    type: self.mealType,
                    count: self.count,
                    content: content
                });
                axios({
                    url: '/boya/submitMeal',
                    method: 'post',
                    data: param,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(function(response) {
                    if (response.data.status == 200) {
                        msg("保存成功");
                        self.submitDisabled = true;
                        // window.location.reload();
                    } else {
                        msg("保存失败：" + response.data.msg);
                        console.log(response.data);
                    }
                })
                .catch(function(error) {
                    msg("保存失败");
                    console.log(error);
                });
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .datetime-wrap {
        margin-bottom: 10px;
    }

    #list>li {
        position: relative;
        padding-left: 1rem;
    }

    .del-wrap {
        position: absolute;
        top: 1rem;
        right: 2rem;
        color: red;
        cursor: pointer;
    }

    .item-detail {}

    .add-wrap,
    .count-wrap,
    .submit-wrap {
        padding-left: 1rem;
        margin-bottom: 1rem;
    }
    </style>
</body>

</html>